<template>
  <div class="info-container">
    <div class="header">
      <img :src="demoImgUrl" alt="" />
    </div>
    <div class="content">
      <div class="user_avatar">
        <div class="user_avatar__pic">
          <van-image
            width="64"
            height="64"
            round
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <p><strong>情到深处自然爱</strong></p>
          <small>12345@qq.com</small>
        </div>
        <van-button size="small" round>编辑资料</van-button>
      </div>
      <p class="user_sign">认真努力，迎接美好生活。</p>
      <van-tabs v-model="active" sticky>
        <van-tab title="资料">
          <div class="tab_wrapper">
            <div class="tab_info">
              <ul>
                <li>性别: <span>男</span></li>
                <li>年龄: <span>24</span></li>
                <li>身高: <span>167</span></li>
                <li>体重: <span>67kg</span></li>
                <li>星座: <span>处女座</span></li>
                <li>生日: <span>1995.08.20</span></li>
                <li>婚否: <span>未婚</span></li>
                <li>性格: <span>傲骄</span></li>
                <li>爱好: <span>拍照</span></li>
                <li>血型: <span>O</span></li>
                <li>民族: <span>汉</span></li>
                <li>学历: <span>本科</span></li>
                <li>职业: <span>学生</span></li>
                <li>常玩的游戏及段位: <span>王者荣耀-王者</span></li>
                <li>手机: <span>12345678910</span></li>
                <li>QQ: <span>1234567890</span></li>
                <li>微信: <span>1234567890</span></li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="图集">
          <div class="tab_wrapper">
            <div class="tab_picture">
              <div v-for="count in 23" :key="count">
                <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg">
                  <template v-slot:error>加载失败</template>
                </van-image>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="收藏">
          <div class="tab_wrapper">
            <div class="tab_collection">
              <van-swipe-cell v-for="count in 10" :key="count">
                <div class="tab_collection_cell">
                  <van-image
                    width="84"
                    height="84"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                  <ul>
                    <li class="oneline">情到深处自然爱</li>
                    <li class="oneline">24岁</li>
                    <li class="oneline">白羊座</li>
                    <li class="oneline">王者荣耀，原神，英雄联盟</li>
                  </ul>
                </div>
                <template #right>
                  <van-button
                    square
                    type="danger"
                    text="删除"
                    class="delete-button"
                  />
                </template>
              </van-swipe-cell>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Info",
  data() {
    return {
      active: 0,
      demoImgUrl: require("@/assets/images/login_banner1.jpg"),
    };
  },
  created() {
    console.log("info");
  },
};
</script>

<style lang="less" scoped>
.info-container {
  margin-bottom: 66px;
  .header {
    width: 100%;
    aspect-ratio: 5/2;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .content {
    margin-top: -52px;
    padding: 16px;
    .user_avatar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .user_avatar__pic {
        .van-image {
          background: #fff;
          padding: 4px;
        }
        strong {
          font-size: 18px;
        }
      }
    }
    .user_sign {
      margin: 8px auto;
    }
    .tab_wrapper {
      padding: 8px 16px;
      .tab_picture {
        display: flex;
        flex-wrap: wrap;
        & > div {
          width: 31%;
          margin-bottom: 3%;
          aspect-ratio: 1/1;
          display: flex;
          align-items: center;
          overflow: hidden;
          border-radius: @border-radius-xs;
          border: 1px solid #ccc;
        }
        & > div:not(:nth-child(3n)) {
          margin-right: calc(5% / 2);
        }
      }
      .tab_collection {
        .tab_collection_cell {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 1px solid #ccc;
          border-radius: @border-radius-xs;
          ul {
            width: calc(100% - 92px);
            font-size: 14px;
          }
        }
        .delete-button {
          height: 100%;
        }
        .van-swipe-cell {
          margin-bottom: 8px;
        }
      }
    }
    /deep/ .van-tabs {
      width: calc(100% + 32px);
      margin-left: -16px;
      .van-tabs__wrap {
        border-bottom: 1px solid #ebedf0;
      }
    }
  }
}
</style>